<template>
    <div class="home-container">
        <!-- 内容区域 -->
        <b-container class="bv-example-row">
            <!-- 商品图片区域 -->
            <b-row class="row-box">
                <b-col cols="12" sm="12" md="12" lg="12">
                    <Tabs :animated="false">
                        <TabPane label="图片集">
                            <b-row>
                                <b-col cols="6" sm="6" md="6" lg="3" class="goodsImg">
                                    <img :src="mainImg.gpAddress" preview="1" :preview-text="goodInfo.gTitle">
                                </b-col>
                                <b-col cols="6" sm="6" md="6" lg="3" class="goodsImg" v-for="item in otherImg" :key="item.gpId">
                                    <img :src="item.gpAddress" preview="2" :preview-text="goodInfo.gTitle">
                                </b-col>
                            </b-row>
                        </TabPane>
                    </Tabs>
                </b-col>
            </b-row>
            <!-- 商品信息区域 -->
            <b-row class="row-box">
                <b-col cols="12" sm="12" md="12" lg="12">
                    <div class="goodsInfo">
                        <h5>{{goodInfo.gTitle}}</h5>
                        <p>{{goodInfo.gName}}</p>
                        <p>
                            <span class="now-price">￥{{goodInfo.gPrice}}</span>
                            <s class="old-price">￥{{goodInfo.gOriginalPrice}}</s>
                            <span class="pay-trade">运费：￥{{goodInfo.gFire}}</span>
                            <span class="pay-trade">{{goodInfo.gTrade}}</span>
                            <span class="pay-trade">{{goodInfo.gMode}}</span>
                        </p>
                        <p>
                            <span class="pay-place"><Icon type="ios-pin" /> {{goodInfo.gAddr}}</span>
                            <span class="pay-place"><Icon type="ios-eye" /> {{goodInfo.gViewNum}}</span>
                            <span class="pay-place">{{goodInfo.gLevel}}</span>
                        </p>
                        <p>
                            <span class="pay-place"><Icon type="md-clock" /> {{goodInfo.gCreateTime | dataFormat}}</span>
                            <span class="pay-place">类别：{{type.tName}}</span>
                            <span class="isCollecte" v-if="isCol">
                                <span class="pay-star">
                                    <a href="javascript:void(0);" @click.prevent="cancelCol(goodCollection.gcId)">
                                        <Icon type="md-star" /> 已收藏</a>
                                </span>
                            </span>
                            <span class="isCollecte" v-else>
                                <span class="pay-star">
                                    <a href="javascript:void(0);" @click.prevent="addCol">
                                        <Icon type="md-star-outline" /> 收藏</a>
                                </span>
                            </span>
                        </p>
                        <p v-if="user.uId!=uId">
                            <router-link to="" class="pay-link"><Icon type="ios-cart" /> 立即购买</router-link>
                            <a href="javascript:void(0)" class="pay-car" @click.prevent="addShopcar(false)">
                                <Icon type="md-cart" /> 加入购物车</a>
                            <router-link :to="'/addPrivateMsg/' + user.uId" class="pay-chat">
                            <Icon type="ios-chatbubbles" /> 联系卖家</router-link>
                        </p>
                        <p v-else>
                            <router-link :to="'/updateGoods/' + goodInfo.gId" class="pay-link">
                            <Icon type="ios-brush-outline" /> 编辑</router-link>
                        </p>
                    </div>
                </b-col>
            </b-row>
            <!-- 商品详情区域 -->
            <b-row class="row-box">
                <b-col cols="12" sm="12" md="12" lg="12">
                    <Tabs :animated="false">
                        <TabPane label="商品详情">{{goodInfo.gDesc}}</TabPane>
                    </Tabs>
                </b-col>
            </b-row>
            <!-- 商品留言区域 -->
            <b-row class="row-box">
                <b-col cols="12" sm="12" md="12" lg="12">
                    <Tabs :animated="false">
                        <TabPane label="商品留言">
                            <comment :commentList="commentList"></comment>
                        </TabPane>
                    </Tabs>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import comment from '@/components/users/common/Comment.vue'


export default {
    name: 'goodsInfo',
    data() {
        return {
            gId: this.$route.params.gId, // 商品id
            uId: JSON.parse(localStorage.getItem('user')).uId, // 用户Id
            goodInfo: '', // 商品详情
            type: '', // 类别详情
            user: '', // 用户信息
            imgList: [], // 图片列表
            mainImg: '', // 主图
            otherImg: [], // 其他图片
            isCol: false, // 判断此商品是否被用户收藏
            goodCollection: '', // 商品收藏信息
            commentList: [], // 评论列表
        }
    },
    created() {
        this.findById()
        this.findPictures()
        this.collection()
        this.findComments()
    },
    methods: {
        // 根据id查找此商品基本信息
        findById() {
            // 新增此商品浏览量
            this.$axios({
                url: 'goods/updateViewNum',
                method: 'get',
                params: {
                    gId: this.gId,
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.$axios({
                        url: 'goods/findById/' + this.gId,
                        method: 'get',
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.goodInfo = res.data.object
                            this.user = res.data.object.users
                            this.findByTypeId()
                            if (res.data.object.gTrade == 1) {
                                this.goodInfo.gTrade = '一口价'
                            } else {
                                this.goodInfo.gTrade = '可砍价'
                            }
                            if (res.data.object.gMode == -1) {
                                this.goodInfo.gMode = '审核失败'
                            } else if (res.data.object.gMode == 0) {
                                this.goodInfo.gMode = '审核中'
                            } else if (res.data.object.gMode == 1) {
                                this.goodInfo.gMode = '售卖中'
                            } else if (res.data.object.gMode == 2) {
                                this.goodInfo.gMode = '已下架'
                            }
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据类别id查找此商品类别详情
        findByTypeId() {
            this.$axios({
                url: 'types/findById/' + this.goodInfo.gTid,
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    this.type = res.data.object
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据商品id查询此商品下的所有图片
        findPictures() {
            this.$axios({
                url: 'goodsPicture/findByGoodsId/' + this.gId,
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    this.imgList = res.data.list
                    this.imgList.forEach(item => {
                        if (item.gpIsCover == 1) {
                            this.mainImg = item
                        } else {
                            this.otherImg.push(item)
                        }
                    })
                    // vue-photo-preview 如果数据是异步获取回来的，会出现不管你怎么点击，都不会出现效果。需要在你成功获取数据回来之后，加上 this.$previewRefresh() ，刷新重置一下
                    this.$previewRefresh()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据商品id和用户id查看该商品是否被收藏
        collection() {
            this.$axios({
                url: 'goodsCollection/findByAllId',
                method: 'get',
                params: {
                    gcGid: this.gId,
                    gcUid: this.uId,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    // 判断收藏状态
                    this.goodCollection = res.data.object
                    if (this.goodCollection == '' || this.goodCollection == null) {
                        this.isCol = false
                    } else {
                        this.isCol = true
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 新增收藏
        addCol() {
            this.$axios({
                url: 'goodsCollection/save',
                method: 'post',
                params: {
                    gcGid: this.gId,
                    gcUid: this.uId,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findById()
                    this.collection()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 取消收藏
        cancelCol(id) {
            this.$axios({
                url: 'goodsCollection/deleteById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findById()
                    this.collection()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        /**
         *  添加购物车
         * 1.如果购物车中之前就已经有这个对应的商品了，就需要提示用户此商品已存在于购物车中
         * 2.如果没有，直接添加商品到购物车中
         */
        addShopcar(nodesc) {
            this.$axios({
                url: 'shopcar/save',
                method: 'post',
                params: {
                    sUid: this.uId,
                    sGid: this.gId,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    // 添加购物车成功
                    this.$Notice.success({
                        title: res.data.msg,
                        desc: nodesc ? '' : this.goodInfo.gName,
                    })
                } else if (res.data.code === 401) {
                    // 购物车中已有此商品
                    this.$Notice.info({
                        title: '添加购物车失败',
                        desc: nodesc ? '' : res.data.msg,
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据商品id查询该商品下的所有评论
        findComments() {
            this.$axios({
                url: 'goodsComment/findByGoodId/' + this.gId,
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    this.commentList = res.data.list
                }
            }).catch(error => {
                console.log(error)
            })
        },
    },
    components: {
        comment,
    },
}
</script>

<style scoped>
.goodsImg {
    margin-bottom: 15px;
    width: 100%;
    height:auto;
}
.goodsImg img {
    width: 100%;
    height:auto;
    cursor: pointer;
}
.now-price{
    color:#f30;
    margin-right: 20px;
}
.old-price{
    color:rgb(112, 112, 112);
}
.pay-trade{
    margin-left: 20px;
}
.pay-place{
    color:rgb(13, 121, 223);
    margin-right: 20px;
}
.pay-star a{
    color:rgb(250, 157, 18);
}
.pay-link{
    color:#fff;
    background-color: #f3352b;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
    margin-right: 12px;
}
.pay-car{
    color:#fff;
    background-color: #18b566;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
    margin-right: 12px;
}
.pay-chat{
    color:#fff;
    background-color: #2d8cf0;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
}
.goodsInfo .ivu-icon{
    font-size: 18px;
}
.row-box{
    background: #fff;
    padding: 15px 5px;
    margin-bottom: 15px;
}
</style>